<template>
  <view class="container">
    <!-- 场地图片 -->
    <view class="court-images">
      <swiper class="image-swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(image, index) in courtDetail.images || [courtDetail.image]" :key="index">
          <image :src="image" class="court-image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 场地信息 -->
    <view class="court-info">
      <view class="info-header">
        <text class="court-name">{{ courtDetail.name }}</text>
        <view class="court-status" :class="courtDetail.status === 1 ? 'available' : 'booked'">
          {{ courtDetail.status === 1 ? '可预订' : '已预订' }}
        </view>
      </view>
      
      <text class="court-desc">{{ courtDetail.description }}</text>
      
      <view class="court-meta">
        <view class="meta-item">
          <text class="meta-label">场地类型</text>
          <text class="meta-value">{{ courtDetail.type || '标准场地' }}</text>
        </view>
        <view class="meta-item" v-if="courtDetail.floor">
          <text class="meta-label">楼层</text>
          <text class="meta-value">{{ courtDetail.floor }}</text>
        </view>
        <view class="meta-item" v-if="courtDetail.size">
          <text class="meta-label">场地尺寸</text>
          <text class="meta-value">{{ courtDetail.size }}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">价格</text>
          <text class="meta-value price">¥{{ courtDetail.price }}/小时</text>
        </view>
      </view>

      <!-- 设施列表 -->
      <view class="facilities-section" v-if="facilities && facilities.length > 0">
        <view class="section-title">场地设施</view>
        <view class="facilities">
          <view class="facility-item" v-for="(facility, index) in facilities" :key="index">
            <text class="facility-icon">{{ facility.icon }}</text>
            <text class="facility-name">{{ facility.name }}</text>
          </view>
        </view>
      </view>

      <!-- 预订须知 -->
      <view class="notice-section">
        <view class="section-title">预订须知</view>
        <view class="notice-list">
          <view class="notice-item" v-for="(notice, index) in bookingNotices" :key="index">
            <text class="notice-dot">•</text>
            <text class="notice-text">{{ notice }}</text>
          </view>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="reviews-section" v-if="reviews && reviews.length > 0">
        <view class="section-title">用户评价</view>
        <view class="reviews">
          <view class="review-item" v-for="(review, index) in reviews" :key="index">
            <view class="review-header">
              <image :src="review.userAvatar || '/static/default-avatar.png'" class="user-avatar" />
              <view class="review-info">
                <text class="user-name">{{ review.userName }}</text>
                <view class="rating">
                  <text class="star" v-for="i in 5" :key="i">{{ i <= review.rating ? '⭐' : '☆' }}</text>
                </view>
              </view>
              <text class="review-time">{{ formatTime(review.createTime) }}</text>
            </view>
            <text class="review-content">{{ review.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-item" @click="toggleFavorite">
        <text class="action-icon" :class="{ active: isFavorite }">
          {{ isFavorite ? '❤️' : '🤍' }}
        </text>
        <text class="action-text">收藏</text>
      </view>
      <view class="action-item" @click="shareCourt">
        <text class="action-icon">📤</text>
        <text class="action-text">分享</text>
      </view>
      <view class="action-item" @click="contactService">
        <text class="action-icon">💬</text>
        <text class="action-text">咨询</text>
      </view>
      <view class="book-btn" @click="bookNow" :class="{ disabled: courtDetail.status !== 1 }">
        <text class="book-text">{{ courtDetail.status === 1 ? '立即预订' : '暂不可预订' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCourtDetail } from '../../api/court.js'

export default {
  data() {
    return {
      courtId: null,
      isFavorite: false,
      courtDetail: {},
      facilities: [],
      reviews: [],
      bookingNotices: [
        '请提前30分钟到达场地',
        '请携带有效身份证件',
        '请穿着运动服装和运动鞋',
        '请爱护场地设施，保持场地整洁',
        '如需取消预订，请提前2小时联系客服',
        '场地内禁止吸烟，请遵守场馆规定'
      ]
    }
  },
  onLoad(options) {
    this.courtId = options.id
    this.loadCourtDetail()
  },
  methods: {
    async loadCourtDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        const result = await getCourtDetail(this.courtId)
        if (result.code === 200) {
          this.courtDetail = result.data
          this.parseJsonFields()
        } else {
          uni.showToast({
            title: result.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载场地详情失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    parseJsonFields() {
      try {
        // 解析设施信息
        if (this.courtDetail.facilities) {
          this.facilities = JSON.parse(this.courtDetail.facilities)
        }
        
        // 解析评价信息
        if (this.courtDetail.reviews) {
          this.reviews = JSON.parse(this.courtDetail.reviews)
        }
      } catch (error) {
        console.error('解析JSON字段失败:', error)
      }
    },
    
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleDateString()
    },
    
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
      uni.showToast({
        title: this.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'success'
      })
    },
    
    shareCourt() {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              uni.showToast({ title: '分享到微信', icon: 'none' })
              break
            case 1:
              uni.showToast({ title: '分享到朋友圈', icon: 'none' })
              break
            case 2:
              this.copyLink()
              break
          }
        }
      })
    },
    
    copyLink() {
      const link = `https://badminton.com/court/${this.courtDetail.id}`
      uni.setClipboardData({
        data: link,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        }
      })
    },
    
    contactService() {
      uni.navigateTo({ url: '/pages/contact/contact' })
    },
    
    bookNow() {
      if (this.courtDetail.status === 1) {
        uni.navigateTo({
          url: `/pages/booking/booking?courtId=${this.courtDetail.id}`
        })
      } else {
        uni.showToast({
          title: '该场地暂不可预订',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 场地图片 */
.court-images {
  height: 250px;
  overflow: hidden;
}

.image-swiper {
  height: 100%;
}

.court-image {
  width: 100%;
  height: 100%;
}

/* 场地信息 */
.court-info {
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.court-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 15px;
}

.court-status {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.court-status.available {
  background: #e8f5e8;
  color: #52c41a;
}

.court-status.booked {
  background: #fff2e8;
  color: #fa8c16;
}

.court-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* 场地元信息 */
.court-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.meta-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.meta-value.price {
  color: #ff6b35;
  font-weight: bold;
  font-size: 16px;
}

/* 通用区块 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #07c160;
  border-radius: 2px;
}

/* 设施列表 */
.facilities-section {
  margin-bottom: 25px;
}

.facilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.facility-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.facility-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.facility-name {
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* 预订须知 */
.notice-section {
  margin-bottom: 25px;
}

.notice-list {
  display: flex;
  flex-direction: column;
}

.notice-item {
  display: flex;
  margin-bottom: 10px;
}

.notice-dot {
  color: #07c160;
  margin-right: 8px;
  font-weight: bold;
}

.notice-text {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  flex: 1;
}

/* 用户评价 */
.reviews-section {
  margin-bottom: 25px;
}

.reviews {
  display: flex;
  flex-direction: column;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.review-info {
  flex: 1;
}

.user-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
}

.rating {
  display: flex;
}

.star {
  font-size: 12px;
  margin-right: 2px;
}

.review-time {
  font-size: 12px;
  color: #999;
}

.review-content {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid #f0f0f0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.action-icon {
  font-size: 20px;
  margin-bottom: 3px;
}

.action-icon.active {
  color: #ff4757;
}

.action-text {
  font-size: 12px;
  color: #666;
}

.book-btn {
  flex: 1;
  background: #07c160;
  color: white;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  margin-left: 15px;
}

.book-btn.disabled {
  background: #ccc;
}

.book-text {
  font-size: 16px;
  font-weight: bold;
}
</style>
